import React from "react"
import {Row, Col, Modal, message, Button, Alert, Form, Input, InputNumber, Spin} from 'antd'
import CountDown from 'ant-design-pro/lib/CountDown';
import {messages} from 'share/common'
import errorMessage from 'share/errorMessage'
import moment from 'moment'
import "styles/personal-setting/personal-setting.scss"
import {connect} from "react-redux";
import PasswordRule from 'components/template/reset-password/password-rule';
import personalSettingService from 'containers/personal-setting/personal-setting.service'
import LoginService from "containers/login/login.service";
import ActiveAccountService from 'containers/login/components/account-login/active-account/active-account.service';

const FormItem = Form.Item;
//默认的密码规则
const DefaultRule = {
  isNeedLowercase: true,
  isNeedNumber: true,
  isNeedSpecialChar: false,
  isNeedUppercase: false,
  maxLength: 32,
  minLength: 6
};
class PersonalSettingForm extends React.Component{
  constructor(){
    super();
    this.state = {
      loading: false,
      showModal: false,
      verifiCodeLoad: false,
      modifyMobileCode: null,
      rule: DefaultRule,
      isUpdate: true,
      imgLoading: false,
      src: "",//验证码图片路径
      attachmentOID: "",//验证码图片attachmentOID
      verifyCode: null,//输入的验证码
      targetTime: 0
    };
  }

  componentWillReceiveProps(nextProps){
    if(this.state.isUpdate && nextProps.modalType === "MODIFY_PASSWORD"){
      this.getPasswordRule();
    }
    if(nextProps.visible !== this.props.visible){
      nextProps.visible && this.getVerifyCodeImage();
      this.setState({showModal: nextProps.visible});
    }
  }

  getPasswordRule = () => {
    let mobile_or_email = this.props.loginUser.email || this.props.loginUser.mobile;
    LoginService.getPasswordRule(mobile_or_email).then(res =>{
      this.setState({
        rule: res.data,
        isUpdate: false
      })
    });
  };

  getVerifyCode = () => {
    const {attachmentOID, verifyCode} = this.state;
    const {modalType} = this.props;
    if(verifyCode) {
      switch (modalType) {
        case "EDIT_MOBILE": {
          this.props.form.validateFields(["EDIT_MOBILE_newPhone"], (err, value) => {
            if (!err) {
              personalSettingService.getMobileEmailVerifyCode(this.props.form.getFieldValue('EDIT_MOBILE_newPhone'), this.props.loginUser.countryCode, attachmentOID, verifyCode).then(res => {
                this.setState({
                  targetTime: new Date().getTime() + 60000,
                  verifiCodeLoad: true
                })
              }).catch(err => {
                this.getVerifyCodeImage();
                this.setState({
                  verifyCode: "",
                });
              });
            }
          });
          break;
        }
        case "EDIT_EMAIL": {
          this.props.form.validateFields(["EDIT_EMAIL_newEmail"], (err, value) => {
            if (!err) {
              personalSettingService.getMobileEmailVerifyCode(this.props.form.getFieldValue('EDIT_EMAIL_newEmail'), this.props.loginUser.countryCode, attachmentOID, verifyCode).then(res => {
                this.setState({
                  targetTime: new Date().getTime() + 60000,
                  verifiCodeLoad: true
                })
              }).catch(err => {
                this.getVerifyCodeImage();
                this.setState({
                  verifyCode: "",
                });
              });
            }
          });
          break;
        }
        case "VERIFY_MOBILE": {
          this.props.form.validateFields(["VERIFY_MOBILE_mobile"], (err, value) => {
            if (!err) {
              personalSettingService.getVerifyMobileVerifiCode(this.props.form.getFieldValue('VERIFY_MOBILE_mobile'), attachmentOID, verifyCode).then(res => {
                this.setState({
                  targetTime: new Date().getTime() + 60000,
                  verifiCodeLoad: true
                })
              }).catch(err => {
                this.getVerifyCodeImage();
                this.setState({
                  verifyCode: "",
                });
                errorMessage(err.response, messages("common.operate.filed"));
              });
            }
          });
          break;
        }
        case "BIND_MOBILE": {
          this.props.form.validateFields(["BIND_MOBILE_mobile"], (err, value) => {
            if (!err) {
              personalSettingService.getBindMobileVerifiCode(this.props.form.getFieldValue('BIND_MOBILE_mobile'), attachmentOID, verifyCode).then(res => {
                this.setState({
                  targetTime: new Date().getTime() + 60000,
                  verifiCodeLoad: true
                })
              }).catch(err => {
                this.getVerifyCodeImage();
                this.setState({
                  verifyCode: "",
                });
                errorMessage(err.response, messages("common.operate.filed"));
              });
            }
          });
          break;
        }
      }
    }else{
      message.error(messages('personal-setting.key65')/*图片验证码不能为空*/);
    }
  };

  handleOk = (e) => {
    e.preventDefault();
    const {modalType} = this.props;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) { //表单验证通过
        this.setState({ loading: true });
        switch (modalType){
          case "EDIT_MOBILE":{
            personalSettingService.identityMobileEmailVerifyCode(this.props.form.getFieldValue('EDIT_MOBILE_newPhone'),this.props.form.getFieldValue('EDIT_MOBILE_verificationCode')).then(res => {
              if(res.status === 200){
                this.props.onOk(this.props.form.getFieldValue('EDIT_MOBILE_newPhone'), null, null);
                this.props.form.resetFields(['EDIT_MOBILE_verificationCode']);
                this.props.form.setFieldsValue({EDIT_MOBILE_newPhone: ""});
                this.setState({showModal: false, verifiCodeLoad: false, verifyCode: "", loading: false});
                message.success(messages('personal-setting.key1')/*手机号修改成功*/);
              }
            }).catch(err => {
              this.setState({ loading: false });
              this.getVerifyCodeImage();
            });
            break;
          }
          case "EDIT_EMAIL":{
            personalSettingService.identityMobileEmailVerifyCode(this.props.form.getFieldValue('EDIT_EMAIL_newEmail'),this.props.form.getFieldValue('EDIT_EMAIL_verificationCode')).then(res => {
              if(res.status === 200){
                this.props.onOk(null, this.props.form.getFieldValue('EDIT_EMAIL_newEmail'), null);
                this.props.form.resetFields(['EDIT_EMAIL_verificationCode']);
                this.props.form.setFieldsValue({EDIT_EMAIL_newEmail: ""});
                this.setState({showModal: false, verifiCodeLoad: false, verifyCode: "", loading: false});
                message.success(messages('personal-setting.key2')/*邮箱修改成功*/);
              }
            }).catch(err => {
              this.setState({ loading: false });
              this.getVerifyCodeImage();
            });
            break;
          }
          case "VERIFY_MOBILE":{
            personalSettingService.verifyMobile(this.props.form.getFieldValue('VERIFY_MOBILE_mobile'),this.props.form.getFieldValue('VERIFY_MOBILE_verificationCode')).then(res => {
              if(res.status === 200){
                this.props.onOk(this.props.form.getFieldValue('EDIT_MOBILE_newPhone'), null, "activated");
                this.props.form.resetFields(['VERIFY_MOBILE_verificationCode']);
                this.setState({showModal: false, verifiCodeLoad: false, loading: false});
                message.success(messages('personal-setting.key3')/*手机号验证成功，您可以使用该手机号登录汇联易平台*/);
              }
            }).catch(err => {
              this.setState({ loading: false });
              this.getVerifyCodeImage();
              errorMessage(err.response,messages("common.operate.filed"));
            });
            break;
          }
          case "BIND_MOBILE":{
            personalSettingService.bindMobile(this.props.form.getFieldValue('BIND_MOBILE_mobile'),this.props.form.getFieldValue('BIND_MOBILE_verificationCode'),this.props.loginUser.countryCode || null).then(res => {
              if(res.status === 200){
                this.props.onOk(this.props.form.getFieldValue('BIND_MOBILE_mobile'), null, "activated");
                this.props.form.resetFields(['BIND_MOBILE_verificationCode']);
                this.props.form.setFieldsValue({BIND_MOBILE_mobile: ""});
                this.setState({showModal: false, verifiCodeLoad: false, verifyCode: "", loading: false});
                message.success(messages('personal-setting.key4')/*手机号绑定成功*/);
              }
            }).catch(err => {
              this.setState({ loading: false });
              this.getVerifyCodeImage();
              errorMessage(err.response,messages("common.operate.filed"));
            });
            break;
          }
          case "MODIFY_PASSWORD":{
            personalSettingService.modifyPassword(this.props.form.getFieldValue('MODIFY_PASSWORD_old_password'),this.props.form.getFieldValue('MODIFY_PASSWORD_new_password')).then(res => {
              if(res.status === 200){
                this.props.form.resetFields();
                this.setState({showModal: false, verifiCodeLoad: false, loading: false});
                message.success(messages('personal-setting.key5')/*密码修改成功*/);
              }
            }).catch(err => {
              this.setState({ loading: false });
              errorMessage(err.response,messages("common.operate.filed"));
            });
            break;
          }
        }
      }
    })
  };

  //验证密码格式是否正确
  regPasswordByRule = (password_rule, password, callback) => {
    password_rule = this.state.rule;
    //先验证长度
    if (password.length < parseInt(password_rule.minLength)) {
      //密码长度不能小于{min}位
      callback(messages('login.key22',{arg1:Number(password_rule.minLength)}/*密码长度不能小于{arg1}位*/));
    }
    if (password.length > parseInt(password_rule.maxLength)) {
      // 密码长度不能大于{max}位
      callback(messages('login.key23',{arg1:Number(password_rule.maxLength)}/*密码长度不能大于{arg1}位*/));
    }
    //验证数字
    let regexNum = /^.*[0-9].*$/;
    //验证小写字母
    let regexLowerCase = /^.*[a-z].*$/;
    //验证大写字母
    let regexUpperCase = /^.*[A-Z].*$/;
    //验证特殊字符
    let regexSpecialChar = /^.*[~!@#\$%\^&\*\(\)_+\-=\[\]\{\}\\\|\'\";:,\<\.\>\/\?\s+].*$/;
    if (password_rule.isNeedNumber) {
      let val = regexNum.test(password);
      if (!val) {
        // 密码需要包含数字
        callback(messages('login.key15'/*密码需要包含数字*/));
      }
    }
    if (password_rule.isNeedLowercase) {
      let val = regexLowerCase.test(password);
      if (!val) {
        // 密码需要包含小写字母
        callback(messages('login.key16'/*密码需要包含小写字母*/));
      }
    }
    if (password_rule.isNeedUppercase) {
      let val = regexUpperCase.test(password);
      if (!val) {
        // 密码需要包含大写字母
        callback(messages('login.key17'/*密码需要包含大写字母*/));
      }
    }
    if (password_rule.isNeedSpecialChar) {
      let val = regexSpecialChar.test(password);
      if (!val) {
        // 密码需要包含特殊字符
        callback(messages('login.key18'/*密码需要包含特殊字符*/));
      }
    }
    //如果上面都通过
    callback();
  };

  compareToOldPassword = (password_rule, password, callback) => {
    if (password && password === this.props.form.getFieldValue('MODIFY_PASSWORD_old_password')) {
      callback(messages('personal-setting.key57')/*与旧密码重复*/);
    } else {
      this.props.form.validateFields(['MODIFY_PASSWORD_password'], { force: true });
      this.regPasswordByRule(password_rule, password, callback);
      callback();
    }
  };

  compareToFirstPassword = (password_rule, password, callback) => {
    if (password && password !== this.props.form.getFieldValue('MODIFY_PASSWORD_new_password')) {
      callback(messages('personal-setting.key6')/*两次输入的密码不一致*/);
    } else {
      callback();
    }
  };

  //验证手机号格式是否正确
  regPhone = (personObj,value, cb) => {
    if(value === "" || value === undefined || value === null){
      cb();
      return;
    };
    let reg = new RegExp('^1[0-9]{10}$');
    if(!reg.test(value)){
      cb(false);
    }else {
      cb();
    }
  };

  regEmail = (personObj,value, cb) => {
    if(value === "" || value === undefined || value === null){
      cb();
      return;
    };
    let reg = new RegExp('^[a-z0-9!#$%&\'*+\\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$');
    if(!reg.test(value)){
      cb(false);
    }else {
      cb();
    }
  };

  //获取验证码图片
  getVerifyCodeImage = () => {
    this.setState({
      imgLoading: true,
    });
    ActiveAccountService.getVerifyCodeImage().then(res => {
      let src = "data:image/png;base64," + res.data.image;
      this.setState({
        src: src,
        attachmentOID: res.data.attachmentOID,
        imgLoading: false,
      });
    }).catch(err => {
      this.setState({
        imgLoading: false,
      });
    })
  };

  //输入验证码时
  inputVerifyCodeChange = (e) => {
    this.setState({
      verifyCode: e.target.value
    });
  };

  onCancel = () => {
    this.props.form.resetFields();
    this.props.onCancel();
    this.setState({
      verifiCodeLoad: false,
      verifyCode: ""
    })
  };

  render(){
    const {verifiCodeLoad, showModal, imgLoading, src, verifyCode, targetTime, loading} = this.state;
    const { modalType, onCancel, title} = this.props;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14, offset: 1},
    };
    const {getFieldDecorator} = this.props.form;
    return(
      <div className="personal-setting">
        <Modal
          visible={showModal}
          title={title}
          width={660}
          destroyOnClose
          onCancel={this.onCancel}
          footer={[
            <Button key="back" onClick={this.onCancel}>{messages("common.cancel")}</Button>,
            <Button key="submit" type="primary" onClick={(modalType) => this.handleOk(modalType)} loading={loading}>
              {messages("common.ok")}
            </Button>
          ]}
        >
          <Form>
          {
            modalType === "EDIT_MOBILE" && <div>
            <Alert message={messages('personal-setting.key7')/*为了确认您本人操作，请完成以下验证*/} type="info" showIcon style={{marginBottom: "16px"}}/>
              <FormItem {...formItemLayout} label={messages('personal-setting.key8')/*新手机号*/}>
                {getFieldDecorator('EDIT_MOBILE_newPhone', {
                  rules: [
                    {required: true, message: messages('common.please.enter')/*请输入*/ },
                    {
                      max: 30,
                      message: messages('enterprise-manage.key247'/*最多输入30个字符*/)
                    }, {
                      validator: this.regPhone,
                      message: messages('personal-setting.key9')/*请输入正确的手机号*/
                    }]
                })(
                  <Input />
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('personal-setting.key66')/*图片验证码*/}>
                <Row>
                  <Col span={12}>
                    <Input value={verifyCode}
                           placeholder={messages('login.key8'/*请输入验证码*/)}///*'请输入验证码'*/
                           onChange={this.inputVerifyCodeChange}/>
                  </Col>
                  <Col span={8} offset={1} style={{textAlign: "left"}}>
                    <Spin spinning={imgLoading}>
                      {
                        src ?
                          <img src={src} alt={messages('setting.key1502'/*加载失败*/)}
                               style={{height: 36, cursor: "pointer", marginTop: -5}}
                               onClick={this.getVerifyCodeImage}/>
                          :
                          <span style={{marginLeft: 15}}>{messages('setting.key1502'/*加载失败*/)}</span>
                      }
                    </Spin>
                  </Col>
                </Row>
              </FormItem>
              <FormItem {...formItemLayout} label={messages('personal-setting.key10')/*短信验证码*/}>
                <Row gutter={8}>
                  <Col span={12}>
                    {getFieldDecorator('EDIT_MOBILE_verificationCode', {
                      rules: [{ required: true, message: messages('common.please.enter')/*请输入*/ }],
                    })(
                      <Input/>
                    )}
                  </Col>
                  <Col span={12}>
                    {verifiCodeLoad ?
                      <span> {messages('personal-setting.key64')/*重新获取*/}<CountDown style={{ fontSize: 14 }} target={targetTime} format={(time) => moment(time).format("s")} onEnd={() => this.setState({verifiCodeLoad: false})}/>s
                      </span>
                      :
                      <a><span onClick={() => this.getVerifyCode()}>{messages('personal-setting.key12')/*获取短信验证码*/}</span></a>}
                  </Col>
                </Row>
              </FormItem>
          </div>
          }{
            modalType === "EDIT_EMAIL" && <div>
              <Alert message={messages('personal-setting.key7')/*为了确认您本人操作，请完成以下验证*/} type="info" showIcon style={{marginBottom: "16px"}}/>
                <FormItem {...formItemLayout} label={messages('personal-setting.key13')/*新邮箱*/}>
                  {getFieldDecorator('EDIT_EMAIL_newEmail', {
                    rules: [
                      { required: true, message: messages('common.please.enter')/*请输入*/ },
                      {
                        validator: this.regEmail,
                        message: messages('personal-setting.key14')/*请输入正确的邮箱*/
                      }],
                  })(
                    <Input />
                  )}
                </FormItem>
              <FormItem {...formItemLayout} label={messages('personal-setting.key66')/*图片验证码*/}>
                <Row>
                  <Col span={12}>
                    <Input value={verifyCode}
                           placeholder={messages('login.key8'/*请输入验证码*/)}///*'请输入验证码'*/
                           onChange={this.inputVerifyCodeChange}/>
                  </Col>
                  <Col span={8} offset={1} style={{textAlign: "left"}}>
                    <Spin spinning={imgLoading}>
                        {
                          src ?
                            <img src={src} alt={messages('setting.key1502'/*加载失败*/)}
                                 style={{height: 36, cursor: "pointer", marginTop: -5}}
                                 onClick={this.getVerifyCodeImage}/>
                            :
                            <span style={{marginLeft: 15}}>{messages('setting.key1502'/*加载失败*/)}</span>
                        }
                    </Spin>
                  </Col>
                </Row>
              </FormItem>
                <FormItem {...formItemLayout} label={messages('personal-setting.key15')/*邮箱验证码*/}>
                  <Row gutter={8}>
                    <Col span={12}>
                      {getFieldDecorator('EDIT_EMAIL_verificationCode', {
                        rules: [{ required: true, message: messages('common.please.enter')/*请输入*/ }],
                      })(
                        <Input />
                      )}
                    </Col>
                    <Col span={12}>
                      {verifiCodeLoad ?
                        <span> {messages('personal-setting.key64')/*重新获取*/}<CountDown style={{ fontSize: 14 }} target={targetTime} format={(time) => moment(time).format("s")} onEnd={() => this.setState({verifiCodeLoad: false})}/>s
                      </span>
                        :
                        <a><span onClick={() => this.getVerifyCode()}>{messages('personal-setting.key16')/*获取邮箱验证码*/}</span></a>}
                    </Col>
                  </Row>
                </FormItem>
            </div>
          }{
          modalType === "VERIFY_MOBILE" && <div>
            <Alert message={messages('personal-setting.key7')/*为了确认您本人操作，请完成以下验证*/} type="info" showIcon style={{marginBottom: "16px"}}/>
              <FormItem {...formItemLayout} label={messages('personal-setting.key17')/*手机号*/}>
                {getFieldDecorator('VERIFY_MOBILE_mobile', {
                  rules: [{ required: true, message: messages('common.please.enter')/*请输入*/ }],
                  initialValue: this.props.loginUser.mobile
                })(
                  <Input disabled/>
                )}
              </FormItem>
            <FormItem {...formItemLayout} label={messages('personal-setting.key66')/*图片验证码*/}>
              <Row>
                <Col span={12}>
                  <Input value={verifyCode}
                         placeholder={messages('login.key8'/*请输入验证码*/)}///*'请输入验证码'*/
                         onChange={this.inputVerifyCodeChange}/>
                </Col>
                <Col span={8} offset={1} style={{textAlign: "left"}}>
                  <Spin spinning={imgLoading}>
                    {
                      src ?
                        <img src={src} alt={messages('setting.key1502'/*加载失败*/)}
                             style={{height: 36, cursor: "pointer", marginTop: -5}}
                             onClick={this.getVerifyCodeImage}/>
                        :
                        <span style={{marginLeft: 15}}>{messages('setting.key1502'/*加载失败*/)}</span>
                    }
                  </Spin>
                </Col>
              </Row>
            </FormItem>
              <FormItem {...formItemLayout} label={messages('personal-setting.key10')/*短信验证码*/}>
                <Row gutter={8}>
                  <Col span={12}>
                    {getFieldDecorator('VERIFY_MOBILE_verificationCode', {
                      rules: [{ required: true, message: messages('common.please.enter')/*请输入*/ }],
                    })(
                      <Input />
                    )}
                  </Col>
                  <Col span={12}>
                    {verifiCodeLoad ?
                      <span> {messages('personal-setting.key64')/*重新获取*/}<CountDown style={{ fontSize: 14 }} target={targetTime} format={(time) => moment(time).format("s")} onEnd={() => this.setState({verifiCodeLoad: false})}/>s
                      </span>
                      :
                      <a><span onClick={() => this.getVerifyCode()}>{messages('personal-setting.key12')/*获取短信验证码*/}</span></a>}
                  </Col>
                </Row>
              </FormItem>
          </div>
        }{
            modalType === "BIND_MOBILE" && <div>
              <Alert message={messages('personal-setting.key7')/*为了确认您本人操作，请完成以下验证*/} type="info" showIcon style={{marginBottom: "16px"}}/>
                <FormItem {...formItemLayout} label={messages('personal-setting.key17')/*手机号*/}>
                  {getFieldDecorator('BIND_MOBILE_mobile', {
                    rules: [{ required: true, message: messages('common.please.enter')/*请输入*/ }],
                  })(
                    <Input  />
                  )}
                </FormItem>
              <FormItem {...formItemLayout} label={messages('personal-setting.key66')/*图片验证码*/}>
                <Row>
                  <Col span={12}>
                    <Input value={verifyCode}
                           placeholder={messages('login.key8'/*请输入验证码*/)}///*'请输入验证码'*/
                           onChange={this.inputVerifyCodeChange}/>
                  </Col>
                  <Col span={8} offset={1} style={{textAlign: "left"}}>
                    <Spin spinning={imgLoading}>
                      {
                        src ?
                          <img src={src} alt={messages('setting.key1502'/*加载失败*/)}
                               style={{height: 36, cursor: "pointer", marginTop: -5}}
                               onClick={this.getVerifyCodeImage}/>
                          :
                          <span style={{marginLeft: 15}}>{messages('setting.key1502'/*加载失败*/)}</span>
                      }
                    </Spin>
                  </Col>
                </Row>
              </FormItem>
                <FormItem {...formItemLayout} label={messages('personal-setting.key10')/*短信验证码*/}>
                  <Row gutter={8}>
                    <Col span={12}>
                      {getFieldDecorator('BIND_MOBILE_verificationCode', {
                        rules: [{ required: true, message: messages('common.please.enter')/*请输入*/ }],
                      })(
                        <Input />
                      )}
                    </Col>
                    <Col span={12}>
                      {verifiCodeLoad ?
                        <span> {messages('personal-setting.key64')/*重新获取*/}<CountDown style={{ fontSize: 14 }} target={targetTime} format={(time) => moment(time).format("s")} onEnd={() => this.setState({verifiCodeLoad: false})}/>s
                      </span>
                        :
                        <a><span onClick={() => this.getVerifyCode()}>{messages('personal-setting.key12')/*获取短信验证码*/}</span></a>}
                    </Col>
                  </Row>
                </FormItem>
            </div>
        }{
            modalType === "MODIFY_PASSWORD" && <div>
              <Alert message={messages('personal-setting.key18')/*如果您只有企业账号，请联系企业管理员*/} type="info" showIcon style={{marginBottom: "16px"}}/>
              <FormItem {...formItemLayout} label={messages('personal-setting.key19')/*旧密码*/}>
                {getFieldDecorator('MODIFY_PASSWORD_old_password', {
                  rules: [
                    {required: true, message: messages('common.please.enter')/*请输入*/ }]
                })(
                  <Input type="password"/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('personal-setting.key21')/*新密码*/} extra={ <PasswordRule rule={this.state.rule}/>}>
                {getFieldDecorator('MODIFY_PASSWORD_new_password', {
                  rules: [
                    {required: true, message: messages('common.please.enter')/*请输入*/ },
                    {validator: (rule, password, callback) => {
                      this.regPasswordByRule(rule, password, callback);
                      this.compareToOldPassword(rule, password, callback);}
                    }]
                })(
                  <Input type="password"/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('personal-setting.key22')/*确认密码*/}>
                {getFieldDecorator('MODIFY_PASSWORD_password', {
                  rules: [
                    { required: true, message: messages('common.please.enter')/*请输入*/ },
                    {validator: this.compareToFirstPassword }],
                })(
                  <Input type="password"/>
                )}
              </FormItem>
            </div>
          }
          </Form>
        </Modal>
      </div>
    )
  }
}

PersonalSettingForm.contextTypes = {
  router: React.PropTypes.object
};
function mapStateToProps(state) {
  return {
    loginUser: state.login.loginUser
  }
}
const WrappedPersonalSettingForm = Form.create()(PersonalSettingForm);

export default connect(mapStateToProps)(WrappedPersonalSettingForm);
